<template>
  <Qfpage title="仓库管理">
    <!-- 头部的内容 -->
    <template #hd>
      <el-button @click="showAddDialog = true">新增仓库</el-button>
    </template>
    <!-- 仓库列表 -->
    <el-table :data="list" height="100%">
      <el-table-column label="仓库" prop="name" />
      <el-table-column label="面积" prop="area" />
      <el-table-column label="地址" prop="address" />
      <el-table-column label="操作">
        <template #default="{ row }">
          <el-button @click="handleEditOpen({ ...row })">编辑</el-button>
          <el-button @click="handleDel(row.id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 底部分页器 -->
    <template #ft>
      <el-pagination
        layout="prev, pager, next, sizes"
        :page-sizes="[10, 30, 50, 100]"
        :total="total"
        :default-page-size="limit"
        :current-page="page"
        @size-change="handeSizeChange"
        @current-change="handlePageChange"
      />
    </template>
  </Qfpage>

  <!-- 新增商品的弹窗 -->
  <el-dialog v-model="showAddDialog" width="600px">
    <template #header> + 添加仓库 </template>
    <div>
      <el-form ref="addfrom" label-width="100px" :model="cangku">
        <el-form-item label="仓库名称" prop="name">
          <el-input v-model="cangku.name" />
        </el-form-item>

        <el-form-item label="地址">
          <el-input v-model="cangku.address" />
        </el-form-item>
        <el-form-item label="面积">
          <el-input v-model="cangku.area" />
        </el-form-item>
      </el-form>
    </div>
    <template #footer>
      <el-button @click="handleAdd">确认添加</el-button>
    </template>
  </el-dialog>

  <!-- 编辑 -->
  <el-drawer v-model="showEdit" size="600px">
    <div>
      <el-form ref="editfrom" label-width="100px" :model="editck">
        <el-form-item label="仓库名称" prop="name">
          <el-input v-model="editck.name" />
        </el-form-item>

        <el-form-item label="地址">
          <el-input v-model="editck.address" />
        </el-form-item>
        <el-form-item label="面积">
          <el-input v-model="editck.area" />
        </el-form-item>
      </el-form>
    </div>
    <template #footer>
      <el-button @click="handleEdit">确定修改</el-button>
    </template>
  </el-drawer>
</template>

<script lang="ts" setup>
import { ref, reactive, onMounted } from 'vue';
import { ElMessage, ElMessageBox } from 'element-plus';
import type { Action } from 'element-plus';
import { addCangku, getCangkuList, delCangku, updateCangku } from '@/api/cangku';

const showAddDialog = ref<boolean>(false);

// 列表
const list = ref([]);
const page = ref<number>(1);
const limit = ref<number>(30);
const total = ref<number>(0);
const getList = async () => {
  const $skip = (page.value - 1) * limit.value;
  const res = await getCangkuList({
    $skip,
    $limit: limit.value,
  });
  console.log('res', res);
  list.value = res.data.data;
  total.value = res.data.total;
};
onMounted(getList);

const handeSizeChange = (val: number) => {
  limit.value = val;
  getList();
};
const handlePageChange = (val: number) => {
  page.value = val;
  getList();
};

// 删除的操作
const handleDel = (id: number) => {
  // 删除的操作一般需要二次确认 避免用户误操作
  ElMessageBox.alert('删除？确定?不后悔？', '想清楚了没', {
    confirmButtonText: 'OK',
    callback: async (action: Action) => {
      if (action === 'cancel') return false;
      const res = await delCangku(id);
      console.log('真正的去执行删除', res);
      if (res.status === 200) {
        ElMessage.success('删除成功');
        getList();
      } else {
        ElMessage.warning('删除失败');
      }
      return true;
    },
  });
};

//  编辑流程
const showEdit = ref<boolean>(false);
const editck = ref({
  id: 0,
  name: '',
  area: '',
  address: '',
});

const handleEditOpen = (row: any) => {
  showEdit.value = true;
  editck.value = row;
};

const handleEdit = async () => {
  const res = await updateCangku(editck.value.id, {
    ...editck.value,
  });
  const { status } = res;
  if (status === 200) {
    ElMessage.success('修改成功');
    getList();
    showEdit.value = false;
  } else {
    ElMessage.warning('修改失败');
  }
};

const cangku = reactive({
  name: '',
  area: 0,
  address: '',
});

const handleAdd = async () => {
  try {
    // const validateRes = await (this.$refs.addfrom as any).validate();
    // console.log('validateRes', validateRes);
    // 确保表单完全的通过校验规则
    const res = await addCangku(cangku);
    console.log('res', res);
    const { status } = res;
    if (status === 201) {
      ElMessage.success('添加成功');
      showAddDialog.value = false;
      getList();
      //   this.getList();
    } else {
      ElMessage.warning('添加失败');
    }
  } catch (e) {
    ElMessage.warning('请按要求检查表单内容');
  }
};
</script>
